<template>
  <div>
    <h1>App</h1>

    <div v-d2>{{ count }}</div>
    <div v-clock v-if="flag"></div>

    <div v-css:color.b="'red'">hello div tag</div>

    <p v-css:backgroundColor.i="'green'">hello p tag</p>
    <p v-css:fontSize.u="'30px'">hello p tag</p>

    <p v-css:fontSize.u.i.b="10 + 20 + 'px'">hello p tag</p>

    <button @click="flag = !flag">{{ flag }}</button>
    <div v-if="flag" v-d1>div1</div>
  </div>
</template>
<script>
let clockH = null;
export default {
  directives: {
    clock: {
      bind(el) {
        clockH = setInterval(() => {
          console.log('hello');
          const d = new Date();
          el.innerHTML = d.toLocaleString();
        }, 1000);
      },
      unbind() {
        clearInterval(clockH)
      }
    },
    d1: {
      bind() {
        console.log('bind');
      },
      inserted() {
        console.log('inserted');
      },
      // update() { },
      unbind() {
        console.log('unbind');
      }
    },
    d2: function (el, binding, vnode) {
      // this
      console.log(vnode.context.count);
      setTimeout(() => {
        vnode.context.count++
      }, 3000);
    }
    // d2: {
    //   inserted() { }
    // }
  },
  data() {
    return {
      flag: true,
      count: 10,
    }
  }
}

</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>